<template>
  <div :class="prefixCls">
    <div v-if="showSpan" :class="`${prefixCls}_span`"> </div>
    <div v-if="showImg" :class="`${prefixCls}_img`"> <img :src="titleLogo" alt="" /></div>
    <div :class="`${prefixCls}_warp`">
      <div :class="`${prefixCls}_content`" style="">
        <template v-if="$slots.default">
          <slot></slot>
        </template>
        <template v-else>
          <span>{{ title }}</span>
        </template>
      </div>
      <div v-if="showGradientBar" :class="`${prefixCls}__gradient-bar`"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import titleLogo from '@/assets/images/device-monitor/title-logo.png'
  const prefixCls = 'basic-title'

  defineProps({
    title: {
      type: String,
      default: ''
    },
    showSpan: {
      type: Boolean,
      default: false
    },
    showImg: {
      type: Boolean,
      default: true
    },
    showGradientBar: {
      type: Boolean,
      default: false
    }
  })
</script>

<style lang="scss" scoped>
  $prefix-cls: 'basic-title';

  .#{$prefix-cls} {
    display: flex;
    align-items: center;

    &_span {
      flex-shrink: 0;
      width: 8px;
      height: 8px;
      margin-right: 5px;
      background: #3498db;
      border-radius: 4px;
    }

    &_img {
      margin-right: 4px;
      img {
        vertical-align: middle;
      }
    }

    &_warp {
      position: relative;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
    }

    &_content {
      z-index: 2;
      display: inline-block;
      flex-shrink: 0;
      justify-content: space-between;
      margin-right: 10px;
      font-size: 20px;
      font-weight: bold;
      color: #202121;
    }

    &__gradient-bar {
      display: inline-block;
      width: 100%;
      height: 6px;
      margin-top: -8px;
      background: linear-gradient(90deg, #3498db 0%, rgb(52 152 219 / 20%) 100%);
      border-radius: 3px;
    }
  }
</style>
